<template>
    <div class="fieldManage zy-content ">
        <div class="searchBox search-box-layout">
            <Row :gutter="24">
                <Col span="4">
                    <div>
                        <p class="label">{{ $t('字典标识') }}</p>
                        <div class="ipt">
                            <Select v-model="paramsList.configCode" filterable clearable
                                    :placeholder="`${$t('common.inputInfo')}`" @on-query-change="timeOutgetCode">
                                <Option v-for="(item,index) of codeList" :value="item" :key="index">{{ item }}</Option>
                            </Select>
                        </div>
                    </div>
                </Col>
                <Col span="4">
                    <div>
                        <p class="label">{{ $t('字典标题') }}</p>
                        <div class="ipt">
                            <Select v-model="paramsList.configName" filterable clearable
                                    :placeholder="`${$t('common.inputInfo')}`" @on-query-change="timeOutgetName">
                                <Option v-for="(item,index) of nameList" :value="item" :key="index">{{ item }}</Option>
                            </Select>
                        </div>
                    </div>
                </Col>
                <Col span="4" v-if="checkBtnPermission.sysConfigFindList">
                    <div>
                        <p class="label hide-label">--</p>
                        <div class="ipt">
                            <Button type="primary" @click="changeNum()" class="search-btn">{{$t('common.Query')}}
                            </Button>
                            <Button class="reset-btn" @click="reset">{{$t('common.reset')}}
                            </Button>
                        </div>
                    </div>
                </Col>
            </Row>
        </div>
        <div class="list-layout mt16">
            <div class="btns clear">
            <span v-if="checkBtnPermission.sysConfigInsert" class="creatBtnright" @click="createfaultCodeShowH">
                <span><Icon type="ios-add-circle-outline"/></span><span class="rightbtn">添加</span>
            </span>
                <Button @click="getTableColumns(columns)">
                    {{ handleContextMenuStatus ? $t('显示操作栏') : $t('隐藏操作栏') }}
                </Button>
            </div>
            <div class="tableContent">
                <Table class="resizable-table" border @on-column-width-resize="onColumnWidthResize"
                       :columns="columnsList" ellipsis ref="selection" :data="dataArr">
                    <template slot-scope="{ row ,index}" slot="action">
                    <i-Switch true-value="on" false-value="off" :loading="switchLoading" :value="row.configVal" v-has="'sysConfigUpdate'" v-if="row.configCode=='inventory_control'" @on-change="switchChange($event,row)"/>
                    <i-Switch true-value="on" false-value="off" :loading="switchLoading" :value="row.configVal" v-has="'forcePasswordChange'" v-if="row.configCode=='check_password'" @on-change="switchChange($event,row)"/>
                    <!-- <i-Switch true-value="on" false-value="off" :loading="switchLoading" :value="row.configVal" v-has="'sysConfigUpdate'" v-if="row.configCode=='check_password_config'" @on-change="switchChange($event,row)"/> -->
                        <span class="operationBtn" @click="createfaultCodeShowH(row)"
                              v-if="row.configCode=='check_password_config'"
                              v-has="'editPasswordTime'">{{ $t('common.Edit') }}</span>
                        <!-- <span class="operationBtn" @click="delPrrShowH(row)" v-if="checkBtnPermission.sysConfigDelete">{{ $t('common.Delete') }}</span> -->
                    </template>
                </Table>
            </div>
            <div class="pageWrap mt16">
                <Page :total="total" :page-size="pageSize" :page-size-opts="$variable.pageSizes" :current="pageNum"
                      @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total/>
            </div>
        </div>
        <Modal :mask-closable="false"
            v-model="create"
            :title="addtitle"
            :loading="loading">
            <Form class="formList" :model="formItem" :label-width="100">
                <!-- <FormItem label="字典标识：" required>
                    <Input type="text" v-model="formItem.configCode" :placeholder="`${$t('common.inputInfo')}`"
                           class="inputBorder" :maxlength="32"></Input>
                </FormItem>
                <FormItem label="字典标题：" required>
                    <Input type="text" v-model="formItem.configName" :placeholder="`${$t('common.inputInfo')}`"
                           class="inputBorder" :maxlength="32"></Input>
                </FormItem> -->
                <FormItem label="字典值：" required>
                    <Input type="text" v-model="formItem.configVal" :placeholder="`${$t('common.inputInfo')}`"
                           class="inputBorder"></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="default" @click="create = false">{{ $t('common.Cancle') }}</Button>
                <Button type="primary" @click="addOk">{{ $t('maintenance.Confirmed') }}</Button>
            </div>
        </Modal>
        <Modal :mask-closable="false"
            v-model="delFaultCodeShowF"
            title=""
            :loading="loading">
            <Row class="enableContent">
                <Col span="24" class="enableContentInner">
                    <img width="95px" src="~images/event/del.png" alt="">
                </Col>
                <Col span="24" class="enableTips">
                    <span>{{ $t('common.confirmDelete') }}</span>
                </Col>
            </Row>
            <div slot="footer">
                <Button type="default" @click="delFaultCodeShowF = false">{{ $t('common.Cancle') }}</Button>
                <Button type="primary" @click="deleteOk">{{ $t('maintenance.Confirmed') }}</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import toggleTableOperation from "@/mixins/toggleTableOperation";

export default {
    name: "fieldManage",
    components: {},
    mixins: [toggleTableOperation],
    data() {
        return {
            formItem: {},
            addtitle: "",
            loading: false,
            create: false,
            paramsList: {},
            pageNum: 1,
            pageSize: 10,
            total: 0,
            columns: [
                {
                    title: '字典标识',
                    key: 'configCode',
                    align: 'center',
                    resizable: true

                },
                {
                    title: '字典标题',
                    key: 'configName',
                    align: 'center',
                    resizable: true
                },
                {
                    title: '字典值',
                    key: 'configVal',
                    align: 'center',
                    resizable: true
                },
                {
                    title: '创建时间',
                    key: 'createTime',
                    align: 'center',
                    resizable: true
                },
                {
                    title: '更新时间',
                    key: 'updateTime',
                    align: 'center',
                    resizable: true
                },
                {
                    title: `${this.$t('common.operation')}`,
                    slot: "action",
                    align: "center",
                    fixed: "right"
                }
            ],
            dataArr: [],
            delFaultCodeShowF: false,//是否显示删除弹窗
            pageSizeOption: [10, 20, 30, 40],
            delIds: [],
            selection: [],
            checkBtnPermission: {},
            timeout: '',
            codeList: [],
            nameList: [],
            switchLoading:false,
        }
    },

    created() {

        this.getTableColumnsWidth(this.columns)

    },
    mounted() {
        this.searchList();
        let itemList = JSON.parse(window.localStorage.getItem('USER_URI'))
        for (let item of itemList) {
            if (item.code == "sysConfigFindList") {
                this.checkBtnPermission.sysConfigFindList = true
            }
            if (item.code == "sysConfigInsert") {
                this.checkBtnPermission.sysConfigInsert = true
            }
            if (item.code == "sysConfigUpdate") {
                this.checkBtnPermission.sysConfigUpdate = true
            }
            if (item.code == "sysConfigDelete") {
                this.checkBtnPermission.sysConfigDelete = true
            }
        }

    },
    methods: {
        reset(){
            this.formItem = {}
        },
        //延时查询
        timeOutgetCode(query) {
            clearTimeout(this.timeout);
            let isSearchF = false;
            this.timeout = setTimeout(() => {
                if (query != "") {
                    for (let item of this.codeList) {
                        if (item == query) {
                            isSearchF = true
                        }
                    }
                    if (isSearchF == false) {
                        this.getCode(query, 1);
                    }
                }
            }, 500);
        },
        timeOutgetName(query) {
            clearTimeout(this.timeout);
            let isSearchF = false;
            this.timeout = setTimeout(() => {
                if (query != "") {
                    for (let item of this.nameList) {
                        if (item == query) {
                            isSearchF = true
                        }
                    }
                    if (isSearchF == false) {
                        this.getCode(query);
                    }
                }
            }, 500);
        },
        getCode(query, type) {
            let params = {}
            if (type === 1) {
                params = {configCode: query, configName: '', pageNum: 1, pageSize: 50}
            } else {
                params = {configCode: '', configName: query, pageNum: 1, pageSize: 50}
            }
            this.axios({
                method: 'get',
                url: '/basic/sysConfig/getCodeOrName',
                params: params
            }).then(res => {
                if (res.code === 200) {
                    if (type === 1) {
                        this.codeList = res.data
                    } else {
                        this.nameList = res.data
                    }
                } else {
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
            })
        },
        changeNum() {
            this.pageNum = 1;
            this.searchList();
        },
        changePageSize(pageSize) {
            this.pageSize = pageSize;
            this.searchList();
        },
        changePageNum(val) {
            this.pageNum = val;
            this.searchList();
        },
        searchList() {//查询列表
            let params = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
            };
            for (let key in this.paramsList) {
                if (this.paramsList[key]) {
                    this.$set(params, key, this.paramsList[key])
                }
            }
            this.axios({
                method: 'get',
                url: '/basic/sysConfig/findList',
                params: params
            }).then(res => {
                if (res.code === 200) {
                    this.dataArr = res.data.list
                    this.total = res.data.total
                } else {
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
            })
        },
        createfaultCodeShowH(row) {//点击增加或编辑
            if (row.id) {
                this.addtitle = `${this.$t('common.Edit')}`
                this.formItem = {
                    id: row.id,
                    configCode: row.configCode,
                    configName: row.configName,
                    configVal: row.configVal,
                };
            } else {
                this.addtitle = `${this.$t('common.New')}`
                this.formItem = {};
            }
            this.create = true;
        },
        switchChange(value,row){
            this.formItem = {...row};
            this.formItem.configVal=value;
            this.switchLoading = true;
            this.axios({
                method: 'post',
                url: '/basic/sysConfig/update',
                data: this.formItem
            }).then(res => {
                this.switchLoading = false;
                this.formItem = {};
                if (res.code === 200) {
                    this.searchList();
                    this.$Message.success(value=='on'?"开启成功":"关闭成功");
                } else {
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
                this.reset();
            })
        },
        addOk() {
            if (this.formItem.configCode === null || this.formItem.configCode === undefined || this.formItem.configCode === "") {
                this.$Message.warning(({content: "请输入字典标识", duration: 6, closable: true}));
                return false;
            }
            if (this.formItem.configName === null || this.formItem.configName === undefined || this.formItem.configName === "") {
                this.$Message.warning(({content: "请输入字典标题", duration: 6, closable: true}));
                return false;
            }
            if (this.formItem.configVal === null || this.formItem.configVal === undefined || this.formItem.configVal === "") {
                this.$Message.warning(({content: "请输入字典值", duration: 6, closable: true}));
                return false;
            }
            this.loading = true;
            if (this.formItem.id) {
                this.axios({
                    method: 'post',
                    url: '/basic/sysConfig/update',
                    data: this.formItem
                }).then(res => {
                    this.loading = false;
                    this.formItem = {};
                    if (res.code === 200) {
                        this.changeNum();
                        this.$Message.success("编辑成功");
                        this.create = false;
                    } else {
                        this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                    }
                })
            } else {
                this.axios({
                    method: 'post',
                    url: '/basic/sysConfig/insert',
                    data: this.formItem
                }).then(res => {
                    this.formItem = {};
                    this.loading = false;
                    if (res.code === 200) {
                        this.changeNum();
                        this.$Message.success("新增成功");
                        this.create = false;
                    } else {
                        this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                    }
                })
            }

        },
        delPrrShowH(row) {
            //点击展示提示删除弹窗
            this.delFaultCodeShowF = true;
            this.delIds = []
            this.delIds.push(row.id);

        },
        deleteOk() {
            this.loading = true;
            this.axios({
                method: 'post',
                url: '/basic/sysConfig/delete',
                data: this.delIds
            }).then(res => {
                this.loading = false;
                if (res.code === 200) {
                    this.changeNum();
                    this.$Message.success("删除成功");
                    this.delFaultCodeShowF = false;
                } else {
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
            })
        }
    }
}
</script>

<style scoped lang="scss">
.fieldManage {
    .formList {
        padding: 30px;

        .btn {
            margin-top: 20px;
            text-align: center;
            width: 100%;
            height: 40px;
        }

        .inputBorder {
            border: 1px solid #dcdee2;
            border-radius: 4px;
        }
    }
}
</style>

<style lang="scss">

</style>
